import {useState,useEffect,useCallback, useRef,useMemo,useContext,useLayoutEffect,useReducer} from 'react'
// 返回dom的 实时滚动距离
// 点击翻转文本
// 返回的简单单击可以翻转文本
function useReverse(){
    const ref = useRef();
    function reverse(){
        console.log("reverse")
        // 获取文本内容
        var text = ref.current.innerText;
        // 翻转文本
        text = text.split('').reverse().join('');
        // 赋值
        ref.current.innerText = text;
    }
    useEffect(()=>{
        // 等待dom加载完毕监听
        ref.current.addEventListener("click",reverse)
        return()=>ref.current.removeEventListener("click",reverse)
    },[])
    return ref;
}


// 获取窗口的小方法
function useWinSize(){
    // 定义size设置size的放 默认是 窗口的宽与高
    var [size,setSize] = useState({w:window.innerWidth,h:window.innerHeight})
    // const onResize=useCallback(function (){
    //     // 更新size的值
    //     setSize({w:window.innerWidth,h:window.innerHeight})
    // },[])
    // useCallback 返回并执行一函数（缓存）
    // useMemo 返回一个函数（缓存）
    const onResize=useMemo(()=>function (){
        // 更新size的值
        setSize({w:window.innerWidth,h:window.innerHeight})
    },[])
    // 组件挂载完毕
    useEffect(()=>{
        // 添加resize事件，执行onResize方法
        window.addEventListener("resize",onResize)
        // 组件卸载移除事件监听
        return ()=> window.removeEventListener("resize",onResize())
    },[])
    // 返回了size
    return  size;
}

// 获取节点的滚动距离
function useScrollTop(){
    // dom引用
    const ref = useRef();
    // 滚动距离
    var [top,setTop] =  useState(0);
    function onScroll(){
        var t = ref.current.scrollTop;
        setTop(t);
    }
    useEffect(()=>{
        // 更新top的的值
        // 监听ref的滚动 更新top的值 setTop
        onScroll(); //给默认值
        ref.current.addEventListener("scroll",onScroll)
        return ()=>ref.current.removeEventListener("scroll",onScroll)
    },[])

    return [ref,top];
}
// 使用 const [ref,top] = useScrollTop() 

export {useWinSize,useReverse,useScrollTop};